<template>
	<view class="home-container">
		<!-- 顶部Tab导航栏 -->
		<view class="top-tabs">
			<scroll-view :scroll-x="true" class="tab-scroll">
				<view class="tab-list">
					<view v-for="(tab, idx) in tabs" :key="tab" :class="['tab-item', idx===tabIndex?'active':'']"
						@tap="onTabChange(idx)">
						<view>{{ tab }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="search-icon" @tap="goSearch">
			<uni-icons type="search" size="26" color="#333" />
		</view>
		</view>

		<!-- 轮播图区域 -->
		<view class="swiper-wrap">
			<uni-swiper-dot :info="swiperList" :current="swiperIndex" mode="dot" field="content">
				<swiper class="swiper" :autoplay="true" :interval="4000" :circular="true" @change="onSwiperChange">
					<swiper-item v-for="(item, idx) in swiperList" :key="item.id">
						<view class="swiper-item">
							<image :src="item.img" class="swiper-img" mode="aspectFill" />
							<view class="swiper-mask"></view>
							<view class="swiper-texts">
								<view class="swiper-title">{{ item.title }}</view>
								<view class="swiper-sub">{{ item.subTitle }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 用户信息区域 -->
		<view class="user-info" @tap="goMine">
			<image :src="user.avatar" class="user-avatar" mode="aspectFill" />
			<view class="user-name">{{ user.name }}</view>
			<view :class="['user-tag', user.vip ? 'vip' : 'normal']">
				<uni-icons v-if="user.vip" type="vip-filled" size="20" color="#b49600" />
				<text>{{ user.vip ? 'VIP Member' : 'User' }}</text>
			</view>
		</view>


		<!-- 本月热播栏目 -->
		<view class="hot-section">
			<view class="section-row">
				<view class="section-title">Hot Broadcast</view>
				<view class="section-more" @tap="goHotList">More<uni-icons type="right" size="18" color="#999" />
				</view>
			</view>
			<scroll-view scroll-x class="hot-scroll">
				<view class="hot-list">
					<view v-for="item in hotList" :key="item.id" class="hot-item" @click="handlePlayer(item)">
						<view class="hot-cover-wrap">
							<image :src="item.cover" class="hot-cover" mode="aspectFill" />
							<view class="hot-badge">Hot</view>
						</view>
						<view class="hot-title">{{ item.title }}</view>
						<view class="hot-rating">
							<uni-icons type="star-filled" size="16" color="#FF6A00" />
							<text>{{ item.rating }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="recommend-section">
			<!-- 影视推荐栏目 -->
			<view class="section-row">
				<view class="section-title">Recommend</view>
				<view class="section-more" @tap="goRecommendList">More<uni-icons type="right" size="18" color="#999" />
				</view>
			</view>
			<view class="recommend-grid">
				<view v-for="item in recommendList" :key="item.id" class="rec-item" @click="handlePlayer(item)">
					<view class="rec-cover-wrap">
						<image :src="item.cover" class="rec-cover" mode="aspectFill" />
						<view class="rec-play"><uni-icons type="play-filled" size="32" color="#fff" /></view>
						<view class="rec-type">{{ item.type }}</view>
					</view>
					<view class="rec-title">{{ item.title }}</view>
					<view class="rec-desc">{{item.description}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['Featured', 'Short Series', 'Shorts', 'Series', 'Reality'],
				tabIndex: 0,
				swiperList: [],
				swiperIndex: 0,
				user: {
					avatar: '/static/logo.png',
					name: 'huoxingshi',
					vip: true
				},
				hotList: [],
				recommendList: []
			}
		},
		onLoad() {
			// TODO: 调用API获取数据
			this.swiperList = [{
					id: 1,
					img: '/static/banner/1.png',
					title: 'Recommended TV Series',
					subTitle: 'Globally popular on the internet'
				},
				{
					id: 2,
					img: '/static/banner/2.png',
					title: 'Recommended TV Series',
					subTitle: 'Globally popular on the internet'
				},
				{
					id: 3,
					img: '/static/banner/3.png',
					title: 'Recommended TV Series',
					subTitle: 'Globally popular on the internet'
				}
			];
			this.hotList = [{
					id: 1,
					cover: '/static/hot/1.png',
					title: 'Seeing Love 13: The Finale',
					rating: '9.2'
				},
				{
					id: 2,
					cover: '/static/hot/2.png',
					title: 'Cosmic Journey',
					rating: '8.8'
				},
				{
					id: 3,
					cover: '/static/hot/3.png',
					title: 'Dream City',
					rating: '9.0'
				},
				{
					id: 4,
					cover: '/static/hot/4.png',
					title: 'Mystery Island',
					rating: '8.5'
				}
			];
			this.recommendList = [{
					id: 1,
					cover: '/static/hot/1.png',
					title: 'Seeing Love 13: The Finale',
					description: 'A touching romantic journey with unexpected twists',
					type: 'Short Series'
				},
				{
					id: 2,
					cover: '/static/hot/2.png',
					title: 'Cosmic Journey',
					description: 'An epic space adventure across galaxies',
					type: 'Shorts'
				},
				{
					id: 3,
					cover: '/static/hot/3.png',
					title: 'Dream City',
					description: 'A mysterious urban tale of dreams and reality',
					type: 'Series'
				},
				{
					id: 4,
					cover: '/static/hot/4.png',
					title: 'Mystery Island',
					description: 'Exploring secrets on a remote, enchanted island',
					type: 'Reality'
				}
			];
		},
		methods: {
			handlePlayer(item) {
				uni.navigateTo({
					url: '/pages/player/player?id=' + item.id
				})
			},
			onTabChange(idx) {
				this.tabIndex = idx;
				// TODO: 切换内容区数据
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			goMine() {
				// TODO: 跳转个人中心
			},
			goHotList() {
				// TODO: 跳转热播列表页
			},
			goRecommendList() {
				// TODO: 跳转推荐列表页
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		background: #121212;
		min-height: 100vh;
		padding-bottom: 20rpx;

		.hot-section,
		.recommend-section {
			background-color: #1e1e1e;
			margin: 20rpx 0;
		}
	}

	.top-tabs {
		position: sticky;
		top: 0;
		z-index: 10;
		background: #1e1e1e;
		display: flex;
		height: 100rpx;
		border-bottom: 1rpx solid #333;

		.tab-scroll {
			display: block;
			height: 100rpx;
			flex: 1;
			width: calc(100vw - 80rpx);
		}

		.tab-list {
			display: flex;
			align-items: center;
			height: 100rpx;

			.tab-item {
				white-space: nowrap;
				padding: 0 18rpx;
				font-size: 32rpx;
				color: #ccc;
				font-weight: 500;
				cursor: pointer;

				&.active {
					color: #FE2B54;
					font-weight: bold;
				}

			}
		}


		.search-icon {
			width: 80rpx;
			line-height: 100rpx;
			height: 100rpx;
			cursor: pointer;
			text-align: center;
		}
		.search-icon uni-icons {
			color: #ccc !important;
		}

		.search-bar-ani {
			position: absolute;
			left: 0;
			top: 100rpx;
			width: 100vw;
			background: #1e1e1e;
			box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.3);
			z-index: 20;
			animation: fadeIn .3s;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(-20rpx);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.search-bar {
			display: flex;
			align-items: center;
			padding: 18rpx 24rpx;
			border-bottom: 1rpx solid #333;

			.search-input {
				flex: 1;
				height: 60rpx;
				background: #333;
				border-radius: 30rpx;
				border: none;
				padding: 0 24rpx;
				font-size: 30rpx;
				color: #ccc;
			}

			.search-cancel {
				margin-left: 24rpx;
				color: #FE2B54;
				font-size: 30rpx;
			}
		}

		.search-suggest {
			background: #1e1e1e;

			.suggest-item {
				padding: 18rpx 32rpx;
				color: #ccc;
				font-size: 28rpx;
				border-bottom: 1rpx solid #333;
			}
		}
	}

	.swiper-wrap {
		width: 100vw;
		height: 56.25vw;
		position: relative;

		.swiper {
			width: 100vw;
			height: 56.25vw;
		}

		.swiper-item {
			position: relative;
			width: 100vw;
			height: 56.25vw;
			overflow: hidden;

			.swiper-img {
				width: 100vw;
				height: 70vw;
				border-radius: 0;
				object-fit: cover;
			}

			.swiper-mask {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.38));
				z-index: 1;
			}

			.swiper-texts {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 36rpx;
				z-index: 2;
				padding: 0 36rpx;

				.swiper-title {
					font-size: 36rpx;
					color: #fff;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.swiper-sub {
					font-size: 28rpx;
					color: #eee;
				}
			}
		}
	}

	.user-info {
		display: flex;
		align-items: center;
		margin: 20rpx 0 0 0;
		padding: 10rpx 32rpx;
		background-color: #1e1e1e;

		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #333;
			object-fit: cover;
		}

		.user-name {
			flex: 1;
			margin-left: 24rpx;
			font-size: 32rpx;
			color: #ccc;
			font-weight: 500;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.user-tag {
			padding: 0 18rpx;
			height: 44rpx;
			display: flex;
			align-items: center;
			border-radius: 24rpx;
			font-size: 26rpx;
			font-weight: 500;

			&.vip {
				background: linear-gradient(90deg, #FFD700, #FFEF8F);
				color: #B8860B;
				border: none;
			}

			&.normal {
				background: #333;
				color: #ccc;
				border: 1rpx solid #555;
			}
		}
	}

	.section-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 0 32rpx;

		.section-title {
			font-size: 36rpx;
			color: #ccc;
			font-weight: bold;
		}

		.section-more {
			color: #666;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
		.section-more uni-icons {
			color: #666 !important;
		}
	}

	.hot-scroll {
		width: 100vw;
		overflow-x: scroll;
		padding: 0 0 24rpx 0;
	}

	.hot-list {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
		padding: 0 32rpx;

		.hot-item {
			width: 220rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}

		.hot-cover-wrap {
			position: relative;
			width: 220rpx;
			height: 124rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-top: 20rpx;

			.hot-cover {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8rpx;
			}

			.hot-badge {
				position: absolute;
				left: 0;
				top: 0;
				background: #FE2B54;
				color: #fff;
				font-size: 22rpx;
				padding: 0 16rpx;
				border-radius: 0 0 12rpx 0;
				font-weight: bold;
			}
		}

		.hot-title {
			font-size: 28rpx;
			color: #ccc;
			margin: 12rpx 0 4rpx 0;
			font-weight: 500;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.hot-rating {
			display: flex;
			align-items: center;
			color: #FF6A00;
			font-size: 26rpx;
			font-weight: 500;
			gap: 6rpx;
		}

	}


	.recommend-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 28rpx 20rpx;
		padding: 24rpx 32rpx 0 32rpx;
	}

	.rec-item {
		width: 335rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		.rec-cover-wrap {
			position: relative;
			width: 100%;
			aspect-ratio: 16/9;
			border-radius: 8rpx;
			overflow: hidden;

			.rec-cover {
				width: 335rpx;
				height: 188.43rpx;
				object-fit: cover;
				border-radius: 8rpx;
			}

			.rec-play {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: rgba(0, 0, 0, 0.38);
				border-radius: 50%;
				padding: 10rpx;
				z-index: 2;
			}

			.rec-type {
				position: absolute;
				right: 12rpx;
				top: 12rpx;
				background: #FE2B54;
				color: #fff;
				font-size: 22rpx;
				border-radius: 18rpx;
				padding: 0 16rpx;
				z-index: 2;
			}
		}

		.rec-title {
			font-size: 28rpx;
			color: #ccc;
			margin: 12rpx 0 0 0;
			font-weight: 500;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.rec-desc {
			color: #999;
			font-size: 18rpx;
			padding: 5rpx 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			width: 100%;
		}
	}
</style>